<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">日线底背离列表</span>
          </template>
          <el-table v-loading="loading" :data="divergences.dailyBottoms" :height="tableHeight" highlight-current-row
            style="width: 100%">
            <el-table-column label="交易日期" align="left" prop="tradeDate" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="股票代码" align="left" prop="symbol" :show-overflow-tooltip="true" />
            <el-table-column label="数据类型" align="left" prop="dataType" :show-overflow-tooltip="true" />
            <el-table-column label="计算类型" align="left" prop="valleyType" :show-overflow-tooltip="true" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">周线底背离列表</span>
          </template>
          <el-table v-loading="loading" :data="divergences.weeklyBottoms" :height="tableHeight" highlight-current-row
            style="width: 100%">
            <el-table-column label="交易日期" align="center" prop="tradeDate"
              :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="股票代码" align="center" prop="symbol" :show-overflow-tooltip="true" />
            <el-table-column label="数据类型" align="center" prop="dataType" :show-overflow-tooltip="true" />
            <el-table-column label="计算类型" align="center" prop="valleyType" :show-overflow-tooltip="true" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">月线底背离列表</span>
          </template>
          <el-table v-loading="loading" :data="divergences.monthlyBottoms" :height="tableHeight" highlight-current-row
            style="width: 100%">
            <el-table-column label="交易日期" align="center" prop="tradeDate"
              :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="股票代码" align="center" prop="symbol" :show-overflow-tooltip="true" />
            <el-table-column label="数据类型" align="center" prop="dataType" :show-overflow-tooltip="true" />
            <el-table-column label="计算类型" align="center" prop="valleyType" :show-overflow-tooltip="true" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">日线顶背离列表</span>
          </template>
          <el-table v-loading="loading" :data="divergences.dailyTops" :height="tableHeight" highlight-current-row
            style="width: 100%">
            <el-table-column label="交易日期" align="center" prop="tradeDate"
              :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="股票代码" align="center" prop="symbol" :show-overflow-tooltip="true" />
            <el-table-column label="数据类型" align="center" prop="dataType" :show-overflow-tooltip="true" />
            <el-table-column label="计算类型" align="center" prop="crestType" :show-overflow-tooltip="true" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">周线顶背离列表</span>
          </template>
          <el-table v-loading="loading" :data="divergences.weeklyTops" :height="tableHeight" highlight-current-row
            style="width: 100%">
            <el-table-column label="交易日期" align="center" prop="tradeDate"
              :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="股票代码" align="center" prop="symbol" :show-overflow-tooltip="true" />
            <el-table-column label="数据类型" align="center" prop="dataType" :show-overflow-tooltip="true" />
            <el-table-column label="计算类型" align="center" prop="crestType" :show-overflow-tooltip="true" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">月线顶背离列表</span>
          </template>
          <el-table v-loading="loading" :data="divergences.monthlyTops" :height="tableHeight" highlight-current-row
            style="width: 100%">
            <el-table-column label="交易日期" align="center" prop="tradeDate"
              :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="股票代码" align="center" prop="symbol" :show-overflow-tooltip="true" />
            <el-table-column label="数据类型" align="center" prop="dataType" :show-overflow-tooltip="true" />
            <el-table-column label="计算类型" align="center" prop="crestType" :show-overflow-tooltip="true" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="RtDivergenceList">
import { getRealtimeDivergences } from "@/api/stock/macd";

const { proxy } = getCurrentInstance();
const divergences = ref({
  "dailyBottoms": [],
  "weeklyBottoms": [],
  "monthlyBottoms": [],
  "dailyTops": [],
  "weeklyTops": [],
  "monthlyTops": []
})
const timer = ref()

const loading = ref(false);
const tableHeight = ref(window.innerHeight - 200);

/** 查询缓存名称列表 */
function getDivergences() {
  loading.value = true;
  getRealtimeDivergences().then(response => {
    divergences.value = response.data;
    loading.value = false;
  });
}

/** 刷新缓存名称列表 */
function refreshCacheNames() {
  getDivergences();
  proxy.$modal.msgSuccess("刷新缓存列表成功");
}

timer.value = setInterval(() => {
  getDivergences();
}, 1000 * 60 * 5);

onUnmounted(() => {
  clearInterval(timer.value);
  timer.value = null;
});

getDivergences()
</script>
